﻿<!DOCTYPE html>
<html>
<head>
    <title>Basic tasks using the JavaScript object model</title>
    <link rel="stylesheet" type="text/css" href="../Content/App.css" />
</head>
<body>
    <!-- This is the div container for the chrome control -->
    <div id="chrome_ctrl_placeholder"></div>

    <!-- Website operations -->
    <h2 class="ms-accentText">Website tasks</h2>
    <h3 class="ms-accentText">Retrieve the properties of a website</h3>
    <div id="retrieveWebsiteContainer" class="operation-panel">
        Use the web property of the ClientContext class to specify the properties of the website object that is located at the specified context URL. After you load the website object through the load(clientObject) method and then call executeQueryAsync(succeededCallback, failedCallback), you acquire access to all the properties of that website. The following example displays the title and description of the specified website, although all other properties that are returned by default become available after you load the website object and execute the query.<br />
        <a href="#" class="code-link">View code</a><br />
        <div class="code-content"></div>
        <input type="button" class="code-exec" value="Get title"/>
        <div class="result-panel"></div>
    </div>
    <h3 class="ms-accentText">Retrieve only selected properties of a website</h3>
    <div id="retrieveWebsitePropsContainer" class="operation-panel">
        To reduce unnecessary data transference between client and server, you might want to return only specified properties of the website object, not all of its properties. In this case, use LINQ query or lambda expression syntax with the load(clientObject) method to specify which properties to return from the server. In the following example, only the title and creation date of the website object become available after executeQueryAsync(succeededCallback, failedCallback) is called.<br />
        <a href="#" class="code-link">View code</a><br />
        <div class="code-content"></div>
        <input type="button" class="code-exec" value="Get properties" />
        <div class="result-panel"></div>
    </div>
    <h3 class="ms-accentText">Write to a website's properties</h3>
    <div id="writeWebsitePropsContainer" class="operation-panel">
        To modify a website, you set its properties and call the update() method, similarly to how the server object model functions. However, in the client object model, you must call executeQuery(succeededCallback, failedCallback) to request batch processing of all commands that you specify. The following example changes the title and description of a specified website.<br />
        <a href="#" class="code-link">View code</a><br />
        <div class="code-content"></div>
        <input type="button" class="code-exec" value="Update property" />
        <div class="result-panel"></div>
    </div>

    <!-- List tasks -->
    <h2 class="ms-accentText">List tasks</h2>
    <h3 class="ms-accentText">Retrieve properties of all lists in a website</h3>
    <div id="readAllPropsContainer" class="operation-panel">
        To return all the lists of a website, load the list collection through the load(clientObject) method, and then call executeQueryAsync(succeededCallback, failedCallback). The following example displays the URL of the website and the date and time that the list was created.<br />
        <a href="#" class="code-link">View code</a><br />
        <div class="code-content"></div>
        <input type="button" class="code-exec" value="Read properties" />
        <div class="result-panel"></div>
    </div>
    <h3 class="ms-accentText">Retrieve only specified properties of lists</h3>
    <div id="readSpecificPropsContainer" class="operation-panel">
        The previous example returns all properties of the lists in a website. To reduce unnecessary data transference between client and server, you can use LINQ query expressions to specify which properties to return. In JavaScript, you specify Include as part of the query string that is passed to the load(clientObject) method to specify which properties to return. The following example uses this approach to return only the title and ID of each list in the collection.<br />
        <a href="#" class="code-link">View code</a><br />
        <div class="code-content"></div>
        <input type="button" class="code-exec" value="Read specific properties" />
        <div class="result-panel"></div>
    </div>
    <h3 class="ms-accentText">Store retrieved lists in a collection</h3>
    <div id="readCollContainer" class="operation-panel">
        As seen in the following example, you can use the loadQuery(clientObjectCollection, exp) method instead of the load(clientObject) method to store the return value in another collection instead of storing it in the lists property.<br />
        <a href="#" class="code-link">View code</a><br />
        <div class="code-content"></div>
        <input type="button" class="code-exec" value="Store lists in collection" />
        <div class="result-panel"></div>
    </div>
    <h3 class="ms-accentText">Apply filters to list retrieval</h3>
    <div id="readFilterContainer" class="operation-panel">
        As the following example shows, you can nest Include statements in a JavaScript query to return metadata for both a list and its fields. The example returns all fields from all lists within a website and displays the title and internal name of all fields whose internal name contains the string "name".<br />
        <a href="#" class="code-link">View code</a><br />
        <div class="code-content"></div>
        <input type="button" class="code-exec" value="Filter lists in collection" />
        <div class="result-panel"></div>
    </div>

    <!-- Create, update and delete lists -->
    <h2 class="ms-accentText">Create, update and delete lists</h2>
    <h3 class="ms-accentText">Create a list</h3>
    <div id="createListContainer" class="operation-panel">
        To create a list object using JavaScript, use the ListCreationInformation object to define its properties, and then pass this object to the add(parameters) function of the ListCollection object. The following example creates a new announcements list.<br />
        <a href="#" class="code-link">View code</a><br />
            <div class="code-content"></div>
            <input type="button" class="code-exec" value="Create list" />
        <div class="result-panel"></div>
        </div>
    <h3 class="ms-accentText">Update a list</h3>
    <div id="updateListContainer" class="operation-panel">
            If you need to update the list after it has been created, you can set list properties and call the update() function before calling executeQueryAsync(succeededCallback, failedCallback), as shown in the following modifications of the previous example.<br />
        <a href="#" class="code-link">View code</a><br />
            <div class="code-content"></div>
            <input type="button" class="code-exec" value="Update list" />
        <div class="result-panel"></div>
        </div>
    <h3 class="ms-accentText">Add a field to a list</h3>
    <div id="addFieldContainer" class="operation-panel">
        Use the add(field) or addFieldAsXml(schemaXml, addToDefaultView, options) function of the FieldCollection object to add a field to the field collection of a list. The following example creates a field and then updates it before calling executeQueryAsync(succeededCallback, failedCallback).<br />
        <a href="#" class="code-link">View code</a><br />
        <div class="code-content"></div>
        <input type="button" class="code-exec" value="Add field" />
        <div class="result-panel"></div>
    </div>
    <h3 class="ms-accentText">Delete a list</h3>
    <div id="deleteListContainer" class="operation-panel">
        To delete a list, call the deleteObject() function of the list object, as shown in the following example.<br />
        <a href="#" class="code-link">View code</a><br />
        <div class="code-content"></div>
        <input type="button" class="code-exec" value="Delete list" />
        <div class="result-panel"></div>
    </div>

    <!-- Create, update and delete folders -->
    <h2 class="ms-accentText">Create, update and delete folders</h2>
    <h3 class="ms-accentText">Create a folder</h3>
    <div id="createFolderContainer" class="operation-panel">
        To create folders, you create a ListItemCreationInformation object, set the underlying object type to SP.FileSystemObjectType.folder and pass it as parameter to the addItem(parameters) function of the List object. Set properties on the list item object that this method returns, and then call the update() function, as seen in the following example.<br />
        <a href="#" class="code-link">View code</a><br />
            <div class="code-content"></div>
            <input type="button" class="code-exec" value="Create folder" />
        <div class="result-panel"></div>
    </div>
    <h3 class="ms-accentText">Update a folder</h3>
    <div id="updateFolderContainer" class="operation-panel">
            To update the folder name, you can write to the FileLeafRef property, and call the update() function so that changes will take effect when you call executeQueryAsync(succeededCallback, failedCallback).<br />
        <a href="#" class="code-link">View code</a><br />
            <div class="code-content"></div>
            <input type="button" class="code-exec" value="Update folder" />
        <div class="result-panel"></div>
    </div>
    <h3 class="ms-accentText">Delete a folder</h3>
    <div id="deleteFolderContainer" class="operation-panel">
        To delete a folder, call the deleteObject() function on the object. The following example uses the getItemById(id) function to return the first item from the document library, and then deletes the item.<br />
        <a href="#" class="code-link">View code</a><br />
        <div class="code-content"></div>
        <input type="button" class="code-exec" value="Delete folder" />
        <div class="result-panel"></div>
    </div>
    
    <!-- List item tasks -->
    <h2 class="ms-accentText">List item tasks</h2>
    <h3 class="ms-accentText">Retrieve items from a list</h3>
    <div id="readItemsContainer" class="operation-panel">
        The getItems(query) function enables you to define a Collaborative Application Markup Language (CAML) query that specifies which items to return. You can pass an undefined CamlQuery object to return all items from the list, or use the set_viewXml function to define a CAML query and return items that meet specific criteria. The following example displays the ID, in addition to the Title and Body column values, of the first 100 items in the Announcements list, starting with list items whose collection ID is greater than 10.<br />
        <a href="#" class="code-link">View code</a><br />
        <div class="code-content"></div>
        <input type="button" class="code-exec" value="Read properties" />
        <div class="result-panel"></div>
    </div>
    <h3 class="ms-accentText">Use the Include method to access properties of ListItem objects</h3>
    <div id="readIncludeContainer" class="operation-panel">
        Four properties of ListItem objects are not available by default when you return list items—displayName, effectiveBasePermissions, hasUniqueRoleAssignments, and roleAssignments. The previous example returns a PropertyOrFieldNotInitializedException if you try to access one of these properties. To access these properties, use the Include method as part of the query string, as shown in the following example.<br />
        <a href="#" class="code-link">View code</a><br />
        <div class="code-content"></div>
        <input type="button" class="code-exec" value="Read specific properties" />
        <div class="result-panel"></div>
    </div>

    <!-- Create, update and delete list items -->
    <h2 class="ms-accentText">Create, update and delete list items</h2>
    <h3 class="ms-accentText">Create a list item</h3>
    <div id="createListItemContainer" class="operation-panel">
        To create list items, you create a ListItemCreationInformation object, set its properties, and pass it as parameter to the addItem(parameters) function of the List object. Set properties on the list item object that this method returns, and then call the update() function, as seen in the following example.<br />
        <a href="#" class="code-link">View code</a><br />
        <div class="code-content"></div>
        <input type="button" class="code-exec" value="Create list item" />
        <div class="result-panel"></div>
    </div>
    <h3 class="ms-accentText">Update a list item</h3>
    <div id="updateListItemContainer" class="operation-panel">
        To set most list item properties, you can use a column indexer to make an assignment, and call the update() function so that changes will take effect when you call executeQueryAsync(succeededCallback, failedCallback). The following example sets the title of an item in the Announcements list.<br />
        <a href="#" class="code-link">View code</a><br />
        <div class="code-content"></div>
        <input type="button" class="code-exec" value="Update list item" />
        <div class="result-panel"></div>
    </div>
    <h3 class="ms-accentText">Delete a list item</h3>
    <div id="deleteListItemContainer" class="operation-panel">
        To delete a list item, call the deleteObject() function on the object. The following example uses the getItemById(id) function to return the an item from the list, and then deletes the item. SharePoint maintains the integer IDs of items within collections, even if they have been deleted. So, for example, the second item in a list might not have 2 as its identifier. A ServerException is returned if the deleteObject() function is called for an item that does not exist.<br />
        <a href="#" class="code-link">View code</a><br />
        <div class="code-content"></div>
        <input type="button" class="code-exec" value="Delete list item" />
        <div class="result-panel"></div>
    </div>

    <!-- Required references to use the JSOM from a SharePoint-hosted html page -->
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="../_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="../_layouts/15/sp.js"></script>
    <script type="text/javascript" src="../_layouts/15/sp.ui.controls.js"></script>

    <!-- This sample uses jQuery to simplify some tasks -->
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>

    <!-- The JavaScript code for all the tasks is in the following script -->
    <script type="text/javascript" src="../Scripts/AppUIEvents.js"></script>
    <script type="text/javascript" src="../Scripts/App.js"></script>

    <!-- Script to load the chrome -->
    <script type="text/javascript" src="../Scripts/ChromeLoader.js"></script>
</body>
</html>